<script setup lang="ts">
import { Secret, SecretType } from "@/views/domain/kubeHud/api/k8s/types";
import KVEditDialog from "./KVEditDialog.vue";
import { computed, onMounted } from "vue";
import DockerConfigItem from "./DockerConfigItem.vue";

const model = defineModel<Secret>();

const onDataChange = (k: string, v: string) => {
  if (!model.value.data) {
    model.value.data = {};
  }

  model.value.data[k] = v;
};

const tlsCrt = computed({
  get() {
    return model.value.data?.["tls.crt"] ?? "";
  },
  set(v: string) {
    if (!model.value.data) {
      model.value.data = {};
    }

    model.value.data["tls.crt"] = v;
  }
});

const tlsKey = computed({
  get() {
    return model.value.data?.["tls.key"] ?? "";
  },
  set(v: string) {
    if (!model.value.data) {
      model.value.data = {};
    }

    model.value.data["tls.key"] = v;
  }
});

onMounted(() => {
  if (!model.value.type) {
    model.value.type = SecretType.Opaque;
  }
});
</script>

<template>
  <el-form :model="model" label-position="top">
    <el-row>
      <el-col :span="12">
        <el-form-item label="类型">
          <el-select
            v-model="model.type"
            placeholder="请选择"
            @change="model.data = {}"
          >
            <el-option label="默认(Opaque)" :value="SecretType.Opaque" />
            <el-option label="镜像服务" :value="SecretType.DockerConfigJson" />
            <el-option label="用户名密码" :value="SecretType.BasicAuth" />
            <el-option label="TLS" :value="SecretType.TLS" />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item v-if="model.type === SecretType.Opaque" label="数据">
      <KVEditDialog
        v-for="(v, k) in model.data"
        :key="v"
        class="w-full"
        :label="`${k}`"
        :value="v"
        base64
        @change="onDataChange"
      >
        <template #default="{ open }">
          <div class="data-row">
            <el-icon size="32"><Key /></el-icon>
            <div class="flex flex-col">
              <span class="font-bold text-base">{{ k }}</span>
              <span class="text-sm">{{ v }}</span>
            </div>
            <div class="flex-1" />
            <div class="toolbar">
              <el-button
                icon="Edit"
                type="primary"
                plain
                circle
                @click="open"
              />
              <el-button
                icon="Delete"
                type="danger"
                plain
                circle
                @click="delete model.data[k]"
              />
            </div>
          </div>
        </template>
      </KVEditDialog>

      <KVEditDialog
        class="w-full"
        label=""
        value=""
        auto-clear
        base64
        @change="onDataChange"
      >
        <template #default="{ open }">
          <div class="data-add">
            <el-button link class="w-full h-full" @click="open">添加</el-button>
          </div>
        </template>
      </KVEditDialog>
    </el-form-item>

    <div v-else-if="model.type === SecretType.TLS" class="flex flex-col">
      <el-row>
        <el-col :span="24">
          <el-form-item label="证书">
            <el-input v-model="tlsCrt" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="私钥">
            <el-input v-model="tlsKey" type="textarea" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <div v-else-if="model.type === SecretType.BasicAuth" class="flex flex-col">
      <el-row>
        <el-col :span="24">
          <el-form-item label="用户名">
            <el-input v-model="model.data.username" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="密码">
            <el-input v-model="model.data.password" />
          </el-form-item>
        </el-col>
      </el-row>
    </div>

    <DockerConfigItem
      v-else-if="model.type === SecretType.DockerConfigJson"
      v-model:model-value="model.data"
    />
  </el-form>
</template>
<style lang="scss" scoped>
.data-row {
  display: flex;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  margin-bottom: 10px;
  align-items: center;
  gap: 10px;

  .toolbar {
    display: none;
  }

  &:hover {
    .toolbar {
      display: block;
    }
  }
}

.data-add {
  padding: 10px;
  border-radius: 8px;
  border: 1px dashed #e0e0e0;
}
</style>
